<template>
    <view class="contentbox" @click="toDetails(item)">
        <view class="contTitle">
            <view class="leftBox hiddenText">
                <text class="type">{{ '【' + item.PlaceType + '】' || '' }}</text>
                <text class="title">{{ item.Title ? $util.entitiesToUtf16(item.Title) : '' }}
                </text>
            </view>
            <view class="comminbox" v-if="tabInd == 1 && manageTitle == ''">
                <block v-if="item.FeeRule == '自行协商'">
                    <image class="giftimg"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17165424394241197.png"
                        mode="widthFix"></image>
                    <text class="commin">自行协商</text>
                </block>
                <block v-else>
                    <image class="giftimg"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17165424394241197.png"
                        mode="widthFix"></image>
                    <text class="commin">{{ item.FeeRule ==
                        '价格区间' ? item.Commission + '-' + item.Commission_End:item.Commission }}</text>
                </block>

            </view>
            <block v-if="tabInd == 1 && manageTitle == '一起挥'">
                <view
                    :class="{ 'state': item.Status == 0, 'finish': item.Status == -2, 'finish': item.Status == 1 || item.Status == 3, 'behalf': item.Status == -1 }">
                    {{ $util.getStatus(item.Status, '一起挥') }}</view>
            </block>
            <block v-if="tabInd == 0 && manageTitle == '我的报名'">
                <view
                    :class="item.Status == 3 ? 'finish' : getMyStatus(item.Item) == 0 || getMyStatus(item.Item) == 1 ? 'state' : 'finish'">
                    {{ item.Status == 3 ? $util.getStatus(3, '我的报名') : $util.getStatus(getMyStatus(item.Item), '我的报名') }}
                </view>
            </block>

        </view>
        <view class="contRemark hiddenText">{{ item.Remark ? $util.entitiesToUtf16(repdis(item.Remark)) : ''
            }}
        </view>
        <view class="cont_3" v-if="tabInd == 0 && manageTitle != '我的报名'">
            <view class="timebox">
                <!-- <text v-if="tabInd == 1 || tabInd == 2" class="time">
                    {{item.DateRule == '自行协商'?'自行协商': getTime2(item.ServerDate) + " " + getWeek(item.ServerDate)
                    + item.ServerTime+' - '+getTime2(item.EndDate)+ " " + getWeek(item.ServerDate) + item.ServerTime}}
                </text> -->
                <text class="time">
                    {{ getTime2(item.ServerDate) + " " + getWeek(item.ServerDate)
                        + item.ServerTime }}
                </text>
            </view>
        </view>
        <view class="cont_4" v-if="item.Images">
            <image v-for="(value, index) in imagelist(item.Images)" :key="index" class="cont_img"
                :class="{ 'cont_OneImg': imagelist(item.Images).length == 1 }" :src="value + ossWatermark" mode="aspectFill">
            </image>

        </view>
        <view class="userbox">
            <view class="username">
                <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
                <view class="name hiddenText">{{ item.Name ? $util.entitiesToUtf16(item.Name) : ''
                    }}
                </view>
            </view>
            <view class="citybox">
                <image class="cityimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"
                    mode="aspectFill"></image>
                <text class="city hiddenText">{{ item.Place ? item.Place : '' }}</text>
                <text class="dis">{{ item.Distance ? item.Distance + 'km' : '0km' }}</text>
            </view>
        </view>
        <view class="userimgbox">
            <view class="cretime">{{ getTime(item.CreateTime) }}</view>
            <block v-if="!isManage">
                <view class="imgbox" v-if="imglist(item.Item).length > 0">
                    <image class="memberimg" v-for="(value, index) in imglist(item.Item)" :key="index"
                        :src="value.HeadImgUrl" mode="aspectFill"></image>
                    <view class="ple">{{ listpeple + '人' }}</view>
                </view>
            </block>
            <block v-else>
                <view class="imgbox" v-if="imglist1(item.Item).length > 0">
                    <image class="memberimg" v-for="(value, index) in imglist1(item.Item)" :key="index"
                        :src="value.HeadImgUrl" mode="aspectFill"></image>
                    <view class="ple">{{ imglist1(item.Item).length + '人' }}</view>
                </view>
            </block>

        </view>

    </view>
</template>

<script>
export default {
    props: {
        item: {
            default: {},
            typeof: Object
        },
        tabInd: {
            default: 0,
            typeof: Number
        },
        manageTitle: {
            default: '',
            typeof: String
        },
        isManage: {
            default: false,
            typeof: Boolean
        },
        ossWatermark:{
            default: '',
            typeof: String
        }
    },
    data() {
        return {
            listpeple: 0,
        };
    },
    methods: {
        imagelist(Images) {
            let imglist = Images.split(',').slice(0, 3)
            return imglist

        },
        //过滤标签
        repdis(msg) {
            var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
            msg = msg.replace(/[|]*\n/, ''); //去除行尾空格
            msg = msg.replace(/&npsp;/gi, ''); //去掉npsp
            return msg;
        },
        // 获取我报名的个人状态
        getMyStatus(list) {
            let userId = uni.getStorageSync('user').UserID
            for (let i = 0; i < list.length; i++) {
                if (list[i].UserID == userId) {
                    return list[i].Status
                }
            }
            return 0
        },
        toDetails(item) {
            this.nav_to(`/pages/ball/ball_details?id=${item.ID}`);
        },
        imglist(e) {
            // let list = e.filter((item, index) => { return  item.Status != -1 && item.Status != -2 }).slice(1,6)
            let list = e.slice(1, 6)
            this.listpeple = e.slice(1).length
            return list
        },
        imglist1(e) {
            // let list = e.filter((item, index) => { return  item.Status != -1 && item.Status != -2 }).slice(0,6)
            let list = e.slice(0, 6)
            return list
        },
        getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            return this.$u.date(timestamp, 'mm-dd');
        },

    }
}
</script>

<style lang="scss">
view {
    box-sizing: border-box;
}

.contentbox {
    // width: 702rpx;
    width: 100%;
    padding: 24rpx 0;
    // margin: 0rpx 24rpx 24rpx 24rpx;
    margin-bottom: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;
    // padding-bottom: 20rpx;
    overflow: hidden;
    position: relative;

    .contTitle {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        margin: 0 0 12rpx 0;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;

        .leftBox {
            flex: 1;
        }

        // justify-content: space-between;
        .comminbox {
            display: flex;
            align-items: center;

            .giftimg {
                width: 36rpx;
                height: 36rpx;
            }

            .commin {
                font-size: 32rpx;
                font-weight: 600;
                color: #706EEE;
            }
        }

        .title {
            // width: 60%;
            font-weight: 600;
        }

        .type {

            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            // margin-right: 24rpx;
        }

        .state {
            font-size: 28rpx;
            font-weight: 500;
            color: #2BA139;
        }

        .behalf {
            font-size: 28rpx;
            color: #FFA11A;
        }

        .finish {
            text-align: right;
            color: #999999 !important;
            font-size: 28rpx;
        }
    }

    .contRemark {
        width: 90%;
        font-size: 28rpx;
        color: #333333;
        margin-left: 24rpx;
        margin-bottom: 16rpx;
    }

    .cont_3 {
        display: flex;
        margin-bottom: 18rpx;
    }

    .cont_4 {
        width: 95%;
        margin: 0 auto;
        // width: 100%;
        border-radius: 24rpx;
        min-height: 100rpx;
        display: flex;
        align-items: center;
        margin-bottom: 18rpx;

        .cont_img {
            width: calc(95% / 3);
            // width: 100rpx;
            height: 190rpx;
            display: block;
            margin-right: 5rpx;
        }

        .cont_OneImg {
            border-radius: 24rpx !important;
        }
    }

    .cont_4 image:last-child {
        border-radius: 0 24rpx 24rpx 0;
    }

    .cont_4 image:first-child {
        border-radius: 24rpx 0 0 24rpx;
    }

    .timebox {
        // display: flex;
        margin: 0 24rpx;
        margin-right: 16rpx;
        min-width: 290rpx;
        height: 48rpx;
        // text-align: center;
        line-height: 48rpx;
        border-radius: 8rpx;
        // background-color: #F4F6F5;

        .timeimg {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
            margin-top: 4rpx;
        }

        .time {
            font-size: 28rpx;
            color: #333333;
        }
    }



    .citybox {
        display: flex;
        align-items: center;
        margin-right: 24rpx;

        .cityimg {
            width: 32rpx;
            height: 32rpx;
        }

        .dis {
            color: #333333;
            font-size: 24rpx;
            border-left: 1rpx solid #333333;
            padding-left: 10rpx;
            margin-left: 10rpx;
        }
    }

    .userimgbox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;

        .cretime {
            color: #999999;
            font-size: 24rpx;
            margin-left: 24rpx;
        }

        .imgbox {
            display: flex;

            .ple {
                color: #999999;
                font-size: 24rpx;
                margin-left: 12rpx;
                margin-right: 24rpx;
            }

            .memberimg {
                width: 36rpx;
                height: 36rpx;
                border-radius: 50%;
                margin-left: -9rpx;
            }
        }
    }

    .userbox {
        display: flex;
        // margin: 0 24rpx;
        margin-bottom: 8rpx;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 48rpx);
        border-bottom: 1rpx solid #E4E4E4;
        padding-bottom: 22rpx;
        margin-left: 24rpx;

        .username {
            display: flex;
            align-items: center;
        }

        .userimg {
            width: 44rpx;
            height: 44rpx;
            margin-right: 14rpx;
            border-radius: 50%;
            // margin-left: 24rpx;
        }

        .name {
            color: #333333;
            font-size: 24rpx;
            width: 250rpx;
        }

        .city {
            max-width: 160rpx;
            font-size: 24rpx;
            color: #333333;
            margin-left: 10rpx;
        }

        .enroll {
            width: 146rpx;
            height: 56rpx;
            text-align: center;
            line-height: 56rpx;
            border-radius: 28rpx;
            background-color: #FFFFFF;
            color: #333333;
            font-size: 24rpx;
            position: absolute;
            right: 32rpx;
            bottom: 44rpx;

            image {
                width: 20rpx;
                height: 24rpx;
                vertical-align: middle;
                margin-bottom: 4rpx;
            }
        }

        .endroll {
            width: 120rpx;
            height: 56rpx;
            text-align: center;
            line-height: 56rpx;
            border-radius: 28rpx;
            background-color: #BDBDBD;
            color: #fff;
            font-size: 24rpx;
            position: absolute;
            right: 0;
            bottom: -6rpx;
        }
    }
}
</style>
